import React from 'react';
import { Form, Modal, DatePicker, message } from 'antd';
import moment from 'moment';
import { turnDoingTask } from '../../../services';
import { ModalTable } from '../../../components';
import { useAfterTaskList } from '../../../hooks';
import { FORM_DEFAULT_LAYOUT, MODAL_DEFAULT_PARAM, MODAL_FORCE_PARAM } from '../config';

const TurnDoingTrueModal = ({ form, taskId, taskRecord, visible, setVisible, onOk }) => {
    // console.log('TurnDoingTrueModal -> taskRecord', taskRecord);
    // console.log('TurnDoingTrueModal -> taskId', taskId);
    const { validateFields, getFieldDecorator } = form;
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [realStartTimeMode, setRealStartTimeMode] = React.useState('time');
    const [actualStartTime, setActualStartTime] = React.useState(moment().format('YYYY-MM-DD HH:mm:ss'));

    const handleOk = () => {
        validateFields(err => {
            if (err) {
                return;
            }
            setConfirmLoading(true);
            turnDoingTask({
                taskId,
                actualStartTime:
                    actualStartTime &&
                    moment(actualStartTime).format(
                        realStartTimeMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss'
                    )
            })
                .then(res => {
                    const { code } = res;
                    if (code === 10000) {
                        if (onOk) onOk();
                        setVisible(false);
                    } else {
                        message.error('操作失败！');
                    }
                })
                .finally(() => {
                    setConfirmLoading(false);
                });
        });
    };

    const handleRealEndTimePanel = (value, mode) => {
        setRealStartTimeMode(mode);
    };

    const handleChange = val => {
        if (val) {
            setActualStartTime(
                val.format(realStartTimeMode === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss')
            );
        } else {
            setActualStartTime('');
            setRealStartTimeMode('date');
        }
    };

    const params = React.useMemo(
        () => ({
            actualTime: actualStartTime
        }),
        [actualStartTime]
    );

    React.useEffect(() => {
        if (taskRecord) {
            const { planStartTime = '' } = taskRecord;
            if (planStartTime) {
                const type = planStartTime.indexOf('00:00:00') !== -1 ? 'date' : 'time';
                setActualStartTime(moment().format(type === 'date' ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD HH:mm:ss'));
                setRealStartTimeMode(type);
                return;
            }
        }
        setActualStartTime(moment().format('YYYY-MM-DD HH:mm:ss'));
        setRealStartTimeMode('time');
    }, [visible]);

    return (
        <Modal
            {...MODAL_DEFAULT_PARAM}
            title="转进行中"
            width={860}
            visible={visible}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            destroyOnClose
            onCancel={() => setVisible(false)}
            {...MODAL_FORCE_PARAM}
        >
            <Form {...FORM_DEFAULT_LAYOUT} style={{ marginTop: 24 }} labelCol={{ span: 6 }}>
                <Form.Item label="实际开始时间">
                    {getFieldDecorator('actualTime', {
                        initialValue: moment(),
                        rules: [
                            {
                                required: true,
                                message: '请选择实际开始时间！'
                            }
                        ]
                    })(
                        <DatePicker
                            showTime
                            style={{ width: 360 }}
                            placeholder="请选择实际开始时间"
                            format={realStartTimeMode === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm'}
                            onPanelChange={handleRealEndTimePanel}
                            onChange={handleChange}
                        />
                    )}
                </Form.Item>
            </Form>
            <ModalTable
                title="逾期影响提示：当前任务已逾期，或将影响以下后置任务进度"
                taskId={taskId}
                shouldHide
                params={params}
                type="doing"
                loadData={useAfterTaskList}
            />
        </Modal>
    );
};

export default Form.create()(TurnDoingTrueModal);
